<template>
  <div id="contain">
    <a-button
    class="u-btn"
      style="background-color: #ff6a00 !important; border-color: #ff6a00; color: #fff"
      type="default"
      @click="addRecord"
    ><a-icon type="add" />新增回款</a-button
    >
    <a-table id="table" :columns="columnsList"  :pagination="false" :data-source="list" :scroll="{ y: 400 }">
      <span slot="action" slot-scope="text,index,record">
        <a @click="showRenameItem(record,index)">编辑</a>
        <a-divider type="vertical" />
        <a @click="showRelItem(record,index)">解除关联</a>
        <a-divider type="vertical" />
        <a @click="showDeleteItem(record,index)">删除</a>
      </span>
    </a-table>
    <crm-receivables-modal v-if="postParams.contractId" ref="receivables" :contractId="postParams.contractId" @ok="getDetail"></crm-receivables-modal>
  </div>
</template>

<script>
  import { getAction } from '@/api/manage'
  import axios from 'axios'
  import CrmReceivablesModal from '../../receivables/modules/CrmReceivablesModal.vue'
  export default {
    name: 'RelativeReceivables',
    props: {
      /** 模块ID */
      id: [String, Number],
    },
    data() {
      return {
        showUploadList: false,
        // 重命名
        renameVisible: false,
        uploadText: '上传',
        columnsList: [
          {
            title: '回款编号',
            dataIndex: 'receivableCode',
            key: 'receivableCode',
          },
          {
            title: '回款方式',
            dataIndex: 'returnType',
            key: 'returnType',
            width: 100,
          },
          {
            title: '回款金额',
            dataIndex: 'money',
            key: 'money',
          },
          {
            title: '回款日期',
            key: 'returnTime',
            dataIndex: 'returnTime',
          },
          {
            title: '操作',
            key: 'action',
            scopedSlots: { customRender: 'action' },
          },
        ],
        list: [],
        postParams: {
          contractId: this.id,
        },
        newName: '',
        fileId: '',
        url: {
          pagingCrmReceivables: '/online/api/pagingCrmReceivables',
          deleteCrmReceivables: '/online/upload/deleteCrmReceivables',
          updateCrmReceivables: '/online/upload/updateCrmReceivables',
        },
      }
    },
    components: {
      CrmReceivablesModal,
    },
    watch: {
      id(val){
        this.getDetail()
      }
    },
    created() {
      this.getDetail()
    },
    methods: {
      getDetail() {
        const params = {}
        params[`contractId`] = this.id
        getAction(this.url.pagingCrmReceivables, params)
          .then((res) => {
            if (res.success) {
              this.list = res.result.records
            }
          }).catch(() => {})
      },
      addRecord(){
        this.$refs['receivables'].add();
      },
      showRelItem(index,record) {
        const that = this
        record.contractId = '';
        this.$confirm({
          title: '提示',
          content: '您确定要取消关联吗？',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            getAction(that.url.updateCrmReceivables, record).then((res) => {
              if (res.success) {
                that.$message.success('成功！')
                that.getDetail()

              } else {
                that.$error(res.message)
              }
            })
          },
          onCancel() {},
        })
      },
      // 删除操作
      showDeleteItem(index,record) {
        const that = this
        this.$confirm({
          title: '提示',
          content: '您确定要删除吗？',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            getAction(that.url.deleteCrmReceivables, {id:record.id}).then((res) => {
              if (res.success) {
                that.$message.success('成功！')
                that.getDetail()

              } else {
                that.$error(res.message)
              }
            })
          },
          onCancel() {},
        })
      },
      showRenameItem(index,record) {
        this.$refs['receivables'].edit(record);
      },
    },
  }
</script>

<style lang="less" scoped>
#contain{
  position: relative;
  .u-btn{
    position: absolute;
    top: 0;
    right: 0;
  }
  #table{
    position: absolute;
    top: 50px;
  }
}
  /deep/ .ant-btn {
    color: #fff;
    background-color: #168a40;
    border-color: #168a40;
    
  }
  /deep/ .ant-table {
    border: 1px solid rgb(230, 230, 230);
  }
</style>